<template>
    <div class="search-box">
        <el-input v-model="searchParams.keyword" @keyup.enter="fetch" />
    </div>
    <div class="opration">
        <el-button type="primary">添加</el-button>
    </div>
    <el-table :data="list" border>
        <el-table-column label="编号" prop="id"></el-table-column>
        <el-table-column label="角色名称" prop="name"></el-table-column>
        <el-table-column label="描述" prop="description"></el-table-column>
        <el-table-column label="用户数" prop="adminCount"></el-table-column>
        <el-table-column label="添加时间" prop="createTime"></el-table-column>
        <el-table-column label="是否启用" prop="status"></el-table-column>
        <el-table-column label="操作" #default="{ row }">
            <el-button type="primary" link @click="router.push('/ums/allocMenu?id=' + row.id)">分配菜单</el-button>
            <el-button type="primary" link @click="router.push('/ums/allocResource?id=' + row.id)">分配资源</el-button>
            <el-button type="primary" link>编辑</el-button>
        </el-table-column>
    </el-table>
    <Pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :total="total" />
</template>
<script setup lang='ts'>
import useTable from '@/hooks/useTable';
import { getRoleListApi } from '@/api';
import Pagination from '@/components/Pagination/index.vue'
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()

const searchParams = reactive({
    keyword: ''
})

const { list, pageNum, pageSize, total, fetch } = useTable(getRoleListApi, searchParams)
</script>
<style lang="less" scoped></style>